import "antd/lib/tabs/style/css";
import _Tabs from "antd/lib/tabs";

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

import React, { useEffect, useCallback, useRef, useState } from 'react';
import { useHistory } from 'umi';
import styles from './index.less';
import PropTypes from 'prop-types';
import Filter from '../TablePage/components/filter2';
var TabPane = _Tabs.TabPane;

function WrapTabs(props) {
  var _useState = useState(''),
      _useState2 = _slicedToArray(_useState, 2),
      activeKey = _useState2[0],
      setActiveKey = _useState2[1];

  var keepAliveArr = useRef([]);
  var history = useHistory();
  var location = props.location,
      route = props.route;
  var pathname = location.pathname,
      search = location.search;
  var routes = route.routes; // 获取全路径

  var getFullPathname = useCallback(function (pathname) {
    var searchTemp = '';
    keepAliveArr.current.map(function (item) {
      if (item.path === pathname) {
        searchTemp = item.search;
      }

      return null;
    });
    return pathname + searchTemp;
  }, []);
  useEffect(function () {
    // 空首页不处理
    if (pathname === '/') {
      return;
    }

    var find = keepAliveArr.current.find(function (item) {
      return item.path === pathname;
    });

    if (find) {
      // 如果已存在，需要判断query是否已更新
      var exitItem = keepAliveArr.current.find(function (item) {
        return item.path === pathname && search !== item.search;
      });
      /*
       * 注：在查看页面 path 相同，会认为是同一个页面
       * */

      if (exitItem) {
        var _routeTemp = routes.find(function (item) {
          return item.path === pathname;
        });

        var _View = _routeTemp.component;
        exitItem.component = /*#__PURE__*/React.createElement(_View, _extends({}, props, {
          key: getFullPathname(keepAliveArr.current, pathname + search)
        }));
        exitItem.search = search;
      }

      setActiveKey(pathname);
      return;
    }

    var routeTemp = routes.find(function (item) {
      return item.path === pathname;
    }); // 避免乱输入url报错

    if (!routeTemp) {
      return;
    }

    var View = routeTemp.component;
    keepAliveArr.current.push({
      ocmponent: View ? /*#__PURE__*/React.createElement(View, props) : null,
      // 克隆子组件
      name: routeTemp.name || '',
      // 设置标签名字
      path: pathname,
      // 设置路径，并以此为key
      search: search // 查询条件，详情页，编辑页等带参数查询等页面需要用到

    }); // 设置不超过10个标签页

    if (keepAliveArr.current.length > 10) {
      keepAliveArr.current.shift();
    }

    setActiveKey(pathname);
  }, [pathname]); // 切换标签

  var onChange = useCallback(function (key) {
    history.push(getFullPathname(key));
  }, []); // 删除标签

  var onEdit = useCallback(function (targetKey, action) {
    if (action === 'remove') {
      keepAliveArr.current = keepAliveArr.current.filter(function (item) {
        return item.path !== targetKey;
      }); // 1在当前页面删除，2在其他页面删除

      history.push(targetKey === pathname ? getFullPathname(keepAliveArr.current[keepAliveArr.current.length - 1].path) : getFullPathname(pathname));
    }
  }, [pathname]);
  var tabBarRender = useCallback(function (pros, DefaultTabBar) {
    var offset = props.collapsed ? 80 : 208;
    var style = {
      position: 'fixed',
      width: "calc(100% - ".concat(offset, "px)"),
      left: offset,
      top: 46,
      zIndex: 100,
      transition: 'all 0.2s',
      boxShadow: '0px 1px 4px 0px rgba(0,21,41,0.12)',
      background: 'rgb(250, 250, 250)'
    };

    if (props.layout === 'topmenu') {
      style.left = 0;
      style.width = '100%';
    }

    return /*#__PURE__*/React.createElement("div", {
      style: style
    }, /*#__PURE__*/React.createElement(DefaultTabBar, pros));
  }, [props.collapsed, props.layout]);
  return /*#__PURE__*/React.createElement("div", {
    className: styles.pageTab
  }, /*#__PURE__*/React.createElement(_Tabs, {
    hideAdd: true,
    type: "editable-card",
    onChange: onChange,
    onEdit: onEdit,
    activeKey: activeKey,
    renderTabBar: tabBarRender
  }, keepAliveArr.current.map(function (pane) {
    return /*#__PURE__*/React.createElement(TabPane, {
      tab: pane.name,
      key: pane.path,
      closable: keepAliveArr.current.length !== 1
    }, /*#__PURE__*/React.createElement("div", {
      style: {
        margin: '62px 24px 0'
      }
    }, pane.component));
  })));
}

WrapTabs.propTypes = {
  location: PropTypes.object,
  route: PropTypes.array,
  collapsed: PropTypes.bool,
  layout: PropTypes.string
};
export default React.memo(WrapTabs);